<template>
  <div class="comment-box">
    <span class="comment-title">共 {{ total }} 条留言</span>
    <t-list :async-loading="asyncLoading" split @load-more="loadMore">
      <t-list-item v-for="item in list" :key="item.id">
        <div class="comment-item">
          <t-avatar
            v-if="item.coverUrl"
            size="64px"
            :image="urls + item.coverUrl + '?imageView2/1/w/64/h/64/format/webp'"
          >
          </t-avatar>
          <t-avatar v-else size="64px" image="https://static.jiyi.show/assets/img/userImg.png"> </t-avatar>
          <div>
            <div class="item-right">
              <div>
                <span class="item-right-title1">{{ item.name ? item.name : '匿名用户' }}</span>
                <span class="item-right-title2">{{ item.createDate }}</span>
              </div>
              <span
                class="item-right-title3"
                :style="{
                  fontSize: store.styleInfo.contentSize,
                  color: store.styleInfo.fontColor,
                }"
                >{{ item.content }}
              </span>
            </div>
            <div class="replyContent" v-if="item.replyContent" :class="'replyContent' + store.styleInfo.colorType">
              <div>
                <span class="reply-text1">回复</span><span>{{ item.replyDate }}</span>
              </div>
              <div class="reply-text2">{{ item.replyContent }}</div>
            </div>
          </div>
        </div>
      </t-list-item>
    </t-list>
  </div>
</template>

<script setup lang="ts">
// @ts-nocheck
import { urls } from '@/utils/request/upload';
import { commentList } from '@/api/comment/comment';
import { ref, computed, reactive, watch } from 'vue';
import { useProjectStore } from '@/store';
import { number } from 'echarts/core';

const props = defineProps({
  showpieceId: {
    type: Number,
  },
  projectId: {
    type: Number,
  },
});

const list = ref([]);
const total = ref(0);
const parmas = reactive({
  CommentStatus: 3,
  showpieceId: 0, //展品主键
  projectId: -1, //项目主键
  value: '', //关键字
  pageNo: 1,
  pageSize: 10,
  isSelf: 0,
});
const asyncLoadingRadio = ref('load-more');
const store = useProjectStore();

const init = async () => {
  try {
    parmas.projectId = props.projectId;
    parmas.showpieceId = props.showpieceId;
    let { data } = await commentList(parmas);
    total.value = data.total;
    list.value = list.value.concat(data.data);
    if (list.value.length < total.value) {
      asyncLoadingRadio.value = 'load-more';
    } else {
      asyncLoadingRadio.value = 'loading-custom';
    }
  } catch {}
};
init();
const loadMore = () => {
  if (list.value.length < total.value) {
    parmas.pageNo = parmas.pageNo + 1;
    asyncLoadingRadio.value = 'loading';
    init();
  } else {
    asyncLoadingRadio.value = 'load-more';
  }
};

const asyncLoading = computed(() => {
  if (asyncLoadingRadio.value === 'loading-custom') {
    return '没有更多了';
  }
  return asyncLoadingRadio.value;
});
watch(
  () => props.showpieceId,
  (value) => {
    parmas.pageNo = 1;
    list.value = [];
    init();
  },
  { deep: true },
);
</script>

<style lang="less" scoped>
.comment-box {
  display: flex;
  flex-direction: column;
  margin-top: 50px;
  :deep(.t-list__load) {
    background: transparent !important;
    padding-top: 80px;
  }
  :deep(.t-list-item-main) {
    background: transparent !important;
  }
  :deep(.t-list-item) {
    background: transparent !important;
  }
}
.comment-title {
  font-size: 18px;
  // font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #333333;
  line-height: 25px;
}
.comment-item {
  display: flex;
  margin-top: 50px;
}
.item-right {
  width: calc(1180px - 64px - 24px);
  word-wrap: break-word;
  flex: 1;
  margin-left: 24px;
}
.item-right-title1 {
  font-size: 16px;
  // font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #666666;
  line-height: 24px;
}
/deep/.t-list-item {
  padding: 0 !important;
}
.item-right-title2 {
  font-size: 14px;
  // font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #999999;
  line-height: 22px;
  margin-left: 10px;
}
.item-right-title3 {
  font-size: 17px;
  // font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #333333;
  line-height: 32px;
  margin-top: 8px;
}

.t-list-item::after {
  height: 0;
}
.replyContent {
  margin-left: 24px;
  padding: 12px 16px;
  color: rgba(0, 0, 0, 0.38);
  .reply-text1 {
    padding-right: 8px;
  }
  .reply-text2 {
    color: rgba(0, 0, 0, 0.8);
    margin-top: 4px;
  }
}
.replyContent1 {
  background: rgba(240, 233, 225, 0.6);
}
.replyContent2 {
  background: rgba(240, 243, 246, 0.6);
}
.replyContent3 {
  background: rgba(250, 245, 237, 0.6);
}
.replyContent4 {
  background: rgba(224, 229, 229, 0.6);
}
.replyContent5 {
  background: rgba(225, 223, 224, 0.6);
}
:deep(.t-avatar) {
  flex-shrink: 0;
}
</style>
